
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '缓存',
        }),
    ],
    optimization: {
        // 1.将runtime.js剥离出来，貌似低版本的webpack会因为runtime和应用程序代码在一起，导致每次模块ID不确定无法进行缓存
        runtimeChunk: 'single',
        // 2.用split插件将公用的依赖代码抽取出来进行缓存
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            }
        },
        // 3.确保模块ID唯一，否则在webpack随着新模块的加入，默认解析顺序会变化，相应的模块ID也就变化了，导致无法正常缓存依赖包
        moduleIds: 'deterministic'
    },
};
